<template>
    <div id='past_records'>
        <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="10rem"
            description="因系统维护，服务暂停使用，具体开放时间请等待学校通知，感谢您的支持！" >
        </van-empty>

    </div>
</template>

<style scoped lang="less">
#past_records {
    width: 100%;
    height: 100%;

    .past_records_back {
        width: 100%;
        margin: 0;
        padding: 0;

        .past_records_back_img {
            width: 100%;
            margin: 0;
            padding: 0;
        }
    }

    .past_records_box {
        position: relative;
        width: 100%;
        height: 520px;

        .arrow_left,
        .arrow_right {
            position: absolute;
            top: 0;
            z-index: 10;
            font-size: 24px;

            &:before {
                width: 44px;
                height: 44px;
                text-align: center;
                line-height: 44px;
            }
        }

        .arrow_left {
            left: 20%;
        }

        .arrow_right {
            right: 20%;
        }

        .past_records_calendar {
            height: 520px;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;

            /deep/ .van-calendar__header {
                .van-calendar__header-title {
                    font-size: 20px;
                    height: 44px;
                }

                .van-calendar__weekdays {
                    .van-calendar__weekday {
                        font-size: 18px;
                    }
                }
            }

            /deep/.van-calendar__month {
                .van-calendar__days {
                    .van-calendar__day {
                        font-size: 18px;

                        .van-calendar__bottom-info {
                            font-size: 16px;
                            color: #c8c9cc;
                        }
                    }

                    .van-calendar__day--multiple-selected,
                    .van-calendar__day--start,
                    .van-calendar__day--end,
                    .van-calendar__day--multiple-middle {
                        .van-calendar__bottom-info {
                            color: #ffffff !important;
                        }
                    }

                    .bottom_txt {
                        .van-calendar__bottom-info {
                            color: #ee0a24;
                        }
                    }

                    .bottom_over {
                        .van-calendar__bottom-info {
                            color: rgb(70, 163, 70);
                        }
                    }

                    .show_txt {
                        color: #2c3e50;

                        .van-calendar__bottom-info {
                            color: #2c3e50;
                        }
                    }
                }

                .van-calendar__month-title {
                    display: none;
                }
            }
        }

    }
}
</style>